import React, { Component, Fragment } from 'react';
import { WeaDialog, WeaFormItem, WeaCheckbox, WeaSearchGroup, WeaLocaleProvider, WeaTab } from 'ecCom';
import { WeaTableNew, WeaSwitch } from 'comsMobx';
import { Button } from 'antd';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';

const { getLabel } = WeaLocaleProvider;
const { WeaTable } = WeaTableNew;

@inject('customPageStore')
@observer
class SuperviseDialogComp extends Component {
  render() {
    return this.getOtherDom();
  }

  getOtherDom() {
    const { customPageStore, getTableDatas, getTabData } = this.props;
    const { superviseVisible, superviseHide, saveSupervise, superviseForm, urgeForm, urgeHide, urgeVisible, saveUrge, validateForm, superviseconditions,
      delayRequestVisible, delayRequestForm, delayDate, detailDialogVisible, setMobxState, remindSetingVisible, remindSetingForm, validateRemindSetingForm } = customPageStore;

    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@nj8d9r`}>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@kls76s`}
          title={getLabel('513073', '公文督办')}
          icon="icon-coms-official"
          iconBgcolor="#f14a2d"
          onCancel={superviseHide}
          visible={superviseVisible}
          style={{ width: 600, height: 600 }}
          hasScroll
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iipb1k@ok`} type="primary" onClick={() => validateForm(superviseForm, saveSupervise, getTableDatas, getTabData)}>{getLabel('33703', '确认')}</Button>,
          ]}
        >
          {this.getSuperviseForm(superviseForm, superviseconditions)}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@c7chxb`}
          title={getLabel('500432', '催办')}
          icon="icon-coms-official"
          iconBgcolor="#f14a2d"
          onCancel={urgeHide}
          visible={urgeVisible}
          style={{ width: 600, height: 300 }}
          hasScroll
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@is46u7@cuiban`} type="primary" onClick={() => validateForm(urgeForm, saveUrge)}>{getLabel('500432', '催办')}</Button>,
          ]}
        >
          {urgeForm.render({ col: 1 })}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8dmf2t`}
          title={getLabel('513132', '延期处理申请')}
          icon="icon-coms-official"
          iconBgcolor="#f14a2d"
          onCancel={() => setMobxState({ delayRequestVisible: false })}
          visible={delayRequestVisible}
          style={{ width: 600, height: 300 }}
          hasScroll
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v1vr09@ok`} type="primary" onClick={() => validateForm(delayRequestForm, delayDate, getTableDatas)}>{getLabel('33703', '确认')}</Button>,
          ]}
        >
          {delayRequestForm.render({ col: 1 })}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@elwovl`}
          title={getLabel('501321', '督办详情')}
          icon="icon-coms-official"
          iconBgcolor="#f14a2d"
          onCancel={() => setMobxState({ detailDialogVisible: false })}
          visible={detailDialogVisible}
          style={{ width: 800, height: 660 }}
          hasScroll
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j60s0w@ok`} type="primary" onClick={() => setMobxState({ detailDialogVisible: false })}>{getLabel('33703', '确认')}</Button>,
          ]}
        >
          {this.getDetailData()}
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@gz0cvj`}
          title={getLabel('21946', '提醒设置')}
          icon="icon-coms-official"
          iconBgcolor="#f14a2d"
          onCancel={() => setMobxState({ remindSetingVisible: false })}
          visible={remindSetingVisible}
          style={{ width: 800, height: 660 }}
          hasScroll
          buttons={[
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@32gb8g@ok`} type="primary" onClick={() => validateRemindSetingForm()}>{getLabel('33703', '确认')}</Button>,
          ]}
        >
          {
            remindSetingForm.render({ col: 1, center: true }, {
              isHide: (key, formParams) => {
                const superviseFormParams = superviseForm.getFormParams();
                if (superviseFormParams.superviseRemindType) {
                  if (!superviseFormParams.superviseRemindType.includes('0')) {
                    if (key.includes('before')) {
                      return true;
                    }
                  }
                  if (!superviseFormParams.superviseRemindType.includes('1')) {
                    if (key.includes('after')) {
                      return true;
                    }
                  }
                }
                if (formParams.beforeRemindNumType.includes('1')) {
                  if (key == 'beforeRemindNum') {
                    return true;
                  }
                }
                if (formParams.afterRemindNumType.includes('1')) {
                  if (key == 'afterRemindNum') {
                    return true;
                  }
                }
                return false;
              },
            })
          }
        </WeaDialog>

      </Fragment>
    );
  }

  getSuperviseForm(form, conditions) {
    const { customPageStore } = this.props;
    const { checkChange, setMobxState } = customPageStore;
    const { isFormInit } = form;
    let group = [];
    isFormInit && toJS(conditions).map((c, index) => {
      let items = [];
      c.items.map((field) => {
        let col = 1;
        let labelCol = field.labelcol;
        let wrapperCol = field.fieldcol;
        if (field.domkey[0] == 'superviseRemindType') {
          const superviseRemindType = form.getFormParams().superviseRemindType;
          const preValue = superviseRemindType.includes('0') ? '1' : '0';
          const afterValue = superviseRemindType.includes('1') ? '1' : '0';
          items.push({
            com: (
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qat13k@${field.domkey[0]}`}
                label={`${field.label}`}
                labelCol={{ span: labelCol }}
                ratio1to2
                error={form.getError(field)}
                tipPosition="bottom"
                wrapperCol={{ span: wrapperCol }}
              >
                <div className="form-item">
                  <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@v51xbu@${field.domkey[0]}`} value={preValue} onChange={() => checkChange('pre')} content={getLabel('32339', '超时前提醒')} />
                  {superviseRemindType.includes('0') && <i className="icon-coms-Flow-setting" onClick={() => setMobxState({ remindSetingVisible: true })} />}
                </div>
                <div className="form-item">
                  <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@zs31p6@${field.domkey[0]}`} value={afterValue} onChange={() => checkChange('after')} content={getLabel('32175', '超时后提醒')} />
                  {superviseRemindType.includes('1') && <i className="icon-coms-Flow-setting" onClick={() => setMobxState({ remindSetingVisible: true })} />}
                </div>

              </WeaFormItem>
            ),
            col,
          });
        } else {
          items.push({
            com: (
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@a2fxk5@${field.domkey[0]}`}
                label={`${field.label}`}
                labelCol={{ span: labelCol }}
                ratio1to2
                error={form.getError(field)}
                tipPosition="bottom"
                wrapperCol={{ span: wrapperCol }}
              >
                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@1b2gcq@${field.domkey[0]}`} fieldConfig={field} form={form} />
              </WeaFormItem>
            ),
            col,
          });
        }
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@it17hx@${index}`} needTigger={false} title={''} showGroup={true} items={items} />);
    });
    return group;
  }

  getDetailData() {
    const { customPageStore } = this.props;
    const { detailForm, detailTabs, tableStore1, tableStore2, tableStore3, detailSelectKey, setMobxState } = customPageStore;
    return (
      <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@59wi9o`}>
        {detailForm.render({ center: true })}
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@f9mld8`}
          datas={detailTabs}
          keyParam="viewcondition" // 主键
          selectedKey={detailSelectKey}
          onChange={v => setMobxState({ detailSelectKey: v })}
        />
        {/* 别问我table1 table 2 table3 分别是什么  我也不知道  */}
        {
          detailSelectKey == '0' &&
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bn1ur5`}
            comsWeaTableStore={tableStore1}
            bordered
          />
        }

        {
          detailSelectKey == '1' &&
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@m4i0m7`}
            comsWeaTableStore={tableStore2}
            bordered
          />
        }

        {
          detailSelectKey == '2' &&
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@c7hczq`}
            comsWeaTableStore={tableStore3}
            bordered
          />
        }

      </Fragment>

    );
  }
}

export default SuperviseDialogComp;
